<template>
	<view class="weekPlan">
		<template>
			<view class="header">
				<steps :options="stepsOptions" :active="stepsActive"></steps>
			</view>
			<swiper style="min-height: 90vh;" :current="stepsActive" @change="swiperTab">
				<swiper-item>
					<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation>
						<xweek @back="changeBack"></xweek>
						<block v-for="(item,index) in dataList" :key="index">
							<collapse :index="index" :current="item.current" @click="change">
								<template v-slot:title>
									<list-cell>{{item.type|weekName}}</list-cell>
								</template>
								<template v-slot:content>
									<view class="tui-content">
										<template v-if="item.motionList.length">
											<view class="tui-image-item" v-for="(motionItem) in item.motionList">
												<image :src="motionItem.motionImg" mode="scaleToFill" class="image"></image>
											</view>
										</template>
										<view class="tui-upload-add tui-image-item" @tap="chooseMotion(item.type)">
											<view class="tui-icon cuIcon-add"></view>
										</view>
									</view>
								</template>
							</collapse>
						</block>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation>
						<view class="cu-form-group margin-top">
							<view class="title">辣度属性</view>
							<picker @change="PickerChange" :value="pickerIndex" :range="picker">
								<view class="picker">
									{{picker[pickerIndex]}}
								</view>
							</picker>
						</view>
						<view class="btnsubmit" @click="btnsubmit">
							确定计划
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</template>
	</view>
</template>

<script>
	import Collapse from "@/components/collapse"
	import ListCell from "@/components/list-cell"
	import Xweek from '@/components/xweek.vue'
	import Steps from '@/components/uni-steps.vue'
	import {hasWeek} from '../../util/mixins.js'
	export default {
		mixins:[hasWeek],
		components: {
			Collapse,
			ListCell,
			Xweek,
			Steps
		},
		data() {
			return {
				dataList: [],
				date: '',
				week: '',
				stepsOptions: [{
					title: '每日计划'
				}, {
					title: '辣度属性'
				}],
				stepsActive: 0,
				picker: ['清淡', '微辣', '中辣', '麻辣'],
				pickerIndex: 1,
				bodyList: this.$comm.getWeekData({
					listName: 'motionList'
				}),
			};
		},
		onLoad() {
			let token = this.$db.get("token");
			if (!token) {
				this.$comm.jumpToLogin();
				return;
			} else {
				uni.$on('checkMotion', (e) => {
					let list = e.list;
					let type = this.type
					let week = this.week;
					this.dataList.find(item => item.type == type).motionList = list
					let obj = this.bodyList.find((item) => item.week == week).motion
					obj = this.dataList
				})
			}
		},
		methods: {
			change(e) {
				let index = e.index;
				let item = this.dataList[index];
				item.current = item.current == index ? -1 : index
			},
			chooseMotion(type) {
				this.type = type
				this.$comm.navigateTo('/pages/motion/motion')
			},
			changeBack(date, week) {
				this.date = date;
				this.week = week;
				this.dataList = this.bodyList.find((item) => item.week == week).motion
				this.dataList.forEach((item, index) => {
					this.$set(item, 'current', 0)
				})
			},
			btnsubmit() {
				let motionDataList = this.bodyList
				if (motionDataList.every(item => {
						return item.motion.every(motionItem => {
							return motionItem.motionList.length
						})
					})) {
					if (this.picker[this.pickerIndex]) {
						this.$api.weekPlanArrange({
							motionDataList: motionDataList,
							menuFlavor: this.picker[this.pickerIndex]
						}).then(res => {
							if (res.code) {
								this.$comm.successToShow('保存成功',()=>{
									this.$comm.switchTabTo('/pages/index/index')
								})
							}
						})
					} else {
						this.$comm.errorToShow('请选择辣度属性')
					}
				} else {
					this.$comm.errorToShow('请完整选择本周的项目')
				}
			},
			PickerChange(e) {
				this.pickerIndex = e.detail.value
			},
			swiperTab: function(e) {
				this.stepsActive = e.detail.current
			},
			format(date) {
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				let d = date.getDate();
				return y + '-' + this.fill(m) + '-' + this.fill(d);
			},
			fill(a) {
				return 10 > a ? '0' + (0 | a) : a
			}
		},
		filters: {
			weekName: function(value) {
				let type = '早餐'
				switch (value) {
					case 'breakfast':
						type = '早餐'
						break;
					case 'lunch':
						type = '午餐'
						break;
					case 'dinner':
						type = '晚餐'
						break;
					default:
						break;
				}
				return type
			}
		}
	}
</script>

<style lang="scss">
	.weekPlan {
		.header {
			background-color: #FFFFFF;
			padding: 20upx 0upx;
		}

		.tui-content {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.tui-upload-add {
				font-size: 68rpx;
				font-weight: 100;
				color: #888;
				background-color: #F7F7F7;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;

				.tui-icon {
					font-size: 44upx;
				}
			}

			.tui-image-item {
				width: 180rpx;
				height: 180rpx;
				position: relative;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				margin-top: 20rpx;
				margin-left: 20rpx;
				overflow: hidden;
			}

			.tui-image-item:nth-of-type(3n) {
				margin-right: 0;
			}
		}

		.NumberBoth {
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100upx;
			margin-top: 30rpx;
			padding: 0upx 30upx;
		}
	}
</style>
